<template>
    <div>
        <div id="myChart1234" ref="leftChartTwo" style="width:100%;height:180px"></div>

    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

onMounted(() => {
    echart()
})
const leftChartTwo = ref()

let echart = () => {
    // let myChart = echarts.init(document.getElementById("myChart1234"));
    let myChart = echarts.init(leftChartTwo.value);

    // 绘制图表
    myChart.setOption({
        title: {
            // text: 'Stacked Line'
        },
        tooltip: {
            trigger: 'axis'
        },

        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },

        xAxis: {
            type: 'value',
            show: true,
            axisLabel: {
                fontSize: '8',    // 文字字体大小
            },
            splitLine: {
                show: false,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
            },
            // axisLine: {
            //     show: true,    // 是否显示坐标轴轴线
            // },

        },
        yAxis: {
            type: 'category',
            show: true,

            boundaryGap: false,
            data: ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
            axisTick: {
                show: true,    // 是否显示坐标轴刻度
                inside: true,     // 坐标轴刻度是否朝内，默认朝外
                length: 4,    // 坐标轴刻度的长度
            },
            axisLabel: {
                fontSize: '8',    // 文字字体大小
            },
        },
        series: [
            {
                name: 'Email',
                type: 'bar',
                stack: 'Total',
                borderWidh: 4,
                showBackground: true,
                data: [110, 67, 91, 13, 90, 15, 18, 19],
                color: '#27D6FF',
                itemStyle: {
                    color: function (params: any) {
                        var index = params.dataIndex;
                        var colorList = [
                            // 渐变颜色的色值和透明度
                            //透明度从0
                            ['rgba(15,235,255,0)', 'rgba(15,235,255,0)', 'rgba(15,235,255,0)', 'rgba(15,235,255,0)', 'rgba(15,235,255,0)', 'rgba(15,235,255,0)', 'rgba(15,235,255,0)', 'rgba(13,94,208,0)', 'rgba(255,155,15,0)', 'rgba(253,103,96,0)'],
                            //到透明度1 ,如果需要不同的颜色直接修改不同颜色即可
                            ['rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(13,94,208,0.6)', 'rgba(255,155,15,0.6)', 'rgba(253,103,96,0.6)']
                        ];
                        return {
                            colorStops: [{
                                offset: 0,   //颜色的开始位置
                                color: colorList[0][index] // 0% 处的颜色
                            }, {
                                offset: 0.6,    //颜色的结束位置
                                color: colorList[1][index] // 100% 处的颜色
                            }]
                        }
                    }
                }
            },

        ]
    });
    window.onresize = function () { // 自适应大小
        myChart.resize();
    };
}
</script>

<style></style>